Ads

How To Learn CSS | Complete Roadmap Of CSS


How To Learn CSS

Today in this article we cover four mager topics related to CSS:

  1. CSS baisc introduction
  2. All CSS Topic in a sequence
  3. Free resources for learning CSS 
  4. Projects for Practice

CSS Basic Introduction:

CSS stands for Cascading Style Sheet,CSS used for styling webpages.its used for making layout, giving colors to text,for aligining,for giving padding and margin to content, for animation and giving transitions to any HTML(For learning About HTML Click here) tag.With CSS you can make website responsive for any device phone, tablet, laptop or PC.

you can style a complete wbsite with CSS.CSS can be used with any xml type markup language.You just need to add link of css file in markup language (HTML) and style the entire website.By changing a single CSS file you can chance entire css.

All CSS Topic In a Sequence:

Almost Every begineer feel overwhelmed about CSS.Main question in his mind is where he learn CSS and How much he need to Learn CSS.Now i explaneed everey single topic in CSS which You need to cover in a beginner level.just copy the name of topic and search about it and then practice it and try to changing init.

These topics are:

  • introdution and basic sentax
  • Selector and how to used css in html
  • Colors and background
  • Box model and Height/width(min-max)
  • border, radius and outline
  • Text and Fonts
  • icons and links
  • List and Table
  • Display and Positions
  • Float and overflow
  • Pseudo Classes and Elements Attr Selector
  • Navigation and Dropdown
  • Value and Unit
  • Specificity and Important
  • Gradient and Shadow
  • Forms
  • CSS Variables
  • Tooltips and Transform(2D &3D)
  • Transition and Animation
  • Object fit & Object Position
  • Button ,Link and Paginations
  • Box-sizing and Multi-column
  • layout's (Flexbox, Grid)
  • Responsive (media queries)
  • Practice, Practice and Practice

Free Resources For learning HTML:

Here I provide two types resources first view video and go any website but prefair w3school view and edit thats topic code and try changing in this code.

Article form tutorial:

www.w3schools.com

freecodecamp.org

Video Tutorial:

CodeWithHarry

freeCodeCamp

DesignCourse

Projects for Practice :

After learning these topic You should develop a small project.Because programming is 10% learning and 90% implementation.if you dont practice then you forget after some days.CSS is just a practice .you can only become master init if you develop more projects.after learning HTML & CSS you should make some real life website clones likes:

  1. Netflex clone with HTML & CSS
  2. A Landing page
  3. A personal portfolio

Tip:

"just open (view page source) or (inspect) on chrome and views websites code ,after viewing code you get ideas how to create a layout of any website."

Also Read:

Different Css Framework & Which One You should learn As a Beginner